<template>
    <div class="main">
        <img src="~/assets/images/openaccount/myopen-title-bj.png" class="index-title-bj" alt="" />
        <div class="title">我的预约</div>
        <div v-if="userInfo && userInfo.is_bank > 0" class="search" @keydown="keydown">
            <!-- <el-input v-model="company_name" placeholder="请输入公司名称" class="search-input"></el-input>
            <el-button size="medium" type="primary" class="search-button" style="margin-right: 16px;"
                @click="my_resevation">搜索</el-button> -->
            <el-input v-model="fa_name" :placeholder="search_type == '1' ? '请输入法人姓名' : '请输入公司名称'"
                class="search-input input-with-select">
                <el-select v-model="search_type" slot="prepend" placeholder="请选择">
                    <el-option label="法人" value="1"></el-option>
                    <el-option label="公司" value="2"></el-option>
                </el-select>
            </el-input>
            <el-button size="medium" type="primary" class="search-button" @click="my_resevation">搜索</el-button>
            <el-button v-if="status == 7" size="medium" type="primary" class="search-button"
                @click="oneClickProcessing">一键处理</el-button>
            <el-button v-if="status == 7" size="medium" type="primary" class="search-button"
                @click="selectAll">一键全选</el-button>
        </div>
        <div v-else class="search"></div>
        <div class="content">
            <div v-if="userInfo" class="left-tab">
                <el-badge v-if="userInfo.is_bank == 1 || userInfo.is_bank == 2"
                    :value="status_1_count ? status_1_count : ''" :max="99" class="item">
                    <div class="tab-item button" :class="{ active: status == 1 }" @click="look(1)">
                        当前预约
                    </div>
                </el-badge>
                <el-badge v-if="userInfo.is_bank == 2" :value="status_2_count ? status_2_count : ''" class="item">
                    <div class="tab-item button" :class="{ active: status == 2 }" @click="look(2)">
                        预约成功
                    </div>
                </el-badge>
                <div v-if="userInfo.is_bank == 0 || userInfo.is_bank == 1" class="tab-item button"
                    :class="{ active: status == 2 }" @click="look(2)">
                    待临柜办理
                </div>
                <el-badge v-if="userInfo.is_bank == 2" :value="status_5_count ? status_5_count : ''" :max="99"
                    class="item">
                    <div class="tab-item button" :class="{ active: status == 5 }" @click="look(5)">
                        提现中
                    </div>
                </el-badge>

                <div v-if="userInfo.is_bank == 0" class="tab-item button" :class="{ active: status == 9 }"
                    @click="look(9)">
                    待处理
                </div>
                <el-badge v-if="userInfo.is_bank == 3" :value="status_6_count ? status_6_count : ''" :max="99"
                    class="item">
                    <div class="tab-item button" :class="{ active: status == 6 }" @click="look(6)">
                        已审核
                    </div>
                </el-badge>
                <el-badge v-if="userInfo.is_bank == 3" :value="status_7_count ? status_7_count : ''" :max="99"
                    class="item">
                    <div class="tab-item button" :class="{ active: status == 7 }" @click="look(7)">
                        已校验
                    </div>
                </el-badge>
                <div v-if="userInfo.is_bank == 0 || userInfo.is_bank == 1 || userInfo.is_bank == 3"
                    class="tab-item button" :class="{ active: status == 3 }" @click="look(3)">
                    已完成
                </div>

                <!-- <div
                    class="tab-item button"
                    :class="{ active: status == 4 }"
                    @click="look(4)"
                >
                    已取消
                </div> -->
                <div v-if="userInfo.is_bank == 2 || userInfo.is_bank == 3" class="tab-item button"
                    :class="{ active: status == 8 }" @click="look(8)">
                    提现失败
                </div>

                <div v-if="userInfo.is_bank == 0 || userInfo.is_bank == 1 || userInfo.is_bank == 2"
                    class="tab-item button" :class="{ active: status == 0 }" @click="look(0)">
                    所有预约
                </div>

                <el-badge v-if="userInfo.is_bank == 2" :value="status_merge['1']" :max="99" class="item">
                    <div class="tab-item button" @click="goHe">
                        合并提现
                    </div>
                </el-badge>

                <el-badge v-if="userInfo.is_bank == 3" :value="status_merge['2'] + status_merge['3']" :max="99"
                    class="item">
                    <div class="tab-item button" @click="goHe">
                        合并提现
                    </div>
                </el-badge>
            </div>
            <div v-else class="left-tab">
                <el-skeleton style="width: 240px" animated>
                    <template slot="template">
                        <div class="tab-item">
                            <el-skeleton-item variant="rect" style="width: 211px; height: 66px;" />
                        </div>
                        <div class="tab-item">
                            <el-skeleton-item variant="rect" style="width: 211px; height: 66px;" />
                        </div>
                        <div class="tab-item">
                            <el-skeleton-item variant="rect" style="width: 211px; height: 66px;" />
                        </div>
                        <div class="tab-item">
                            <el-skeleton-item variant="rect" style="width: 211px; height: 66px;" />
                        </div>
                    </template>
                </el-skeleton>
            </div>
            <div class="right-list">
                <div v-if="dataList.length == 0 && !loading" style="width: 776px;">
                    <el-empty description="暂无数据"></el-empty>
                </div>
                <el-skeleton v-if="loading" animated>
                    <template slot="template">
                        <div v-for="item in 3" :key="item" class="item">
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 280px;" />
                            </div>
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 140px;" /> <el-skeleton-item
                                    variant="text" style="width: 100px;" />
                            </div>
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 120px;" /> <el-skeleton-item
                                    variant="text" style="width: 140px;" />
                            </div>
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 120px;" /> <el-skeleton-item
                                    variant="text" style="width: 160px;" />
                            </div>
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 120px;" /> <el-skeleton-item
                                    variant="text" style="width: 170px;" />
                            </div>
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 80px;" /> <el-skeleton-item
                                    variant="text" style="width: 120px;" />
                            </div>
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 120px;" /> <el-skeleton-item
                                    variant="text" style="width: 140px;" />
                            </div>
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 120px;" /> <el-skeleton-item
                                    variant="text" style="width: 140px;" />
                            </div>
                            <div class="text-time">
                                <el-skeleton-item variant="text" style="width: 100px;" /> <el-skeleton-item
                                    variant="text" style="width: 80px;" />
                            </div>
                            <div class="text-img">
                                <div class="label">
                                    <el-skeleton-item variant="text" style="width: 140px;" />
                                </div>
                                <el-skeleton-item variant="image"
                                    style="width: 160px; height: 100px; margin-right: 16px;" />
                                <el-skeleton-item variant="image" style="width: 160px; height: 100px;" />
                            </div>
                            <div class="text-img">
                                <div class="label">
                                    <el-skeleton-item variant="text" style="width: 100px;" />
                                </div>
                                <el-skeleton-item variant="image" style="width: 160px; height: 100px;" />
                            </div>
                        </div>
                    </template>
                </el-skeleton>
                <div v-if="userInfo && userInfo.is_bank == 2" v-show="(status == 1 || status == 2 || status == 5) &&
                    dataList.length > 0
                    " class="max-num">
                    代办数量：
                    <span>{{ allcount }}</span>
                </div>


                <template v-if="!loading">
                    <myOpenItem v-for="(item, index) in dataList" :key="index" :item="item" :status="status"
                        @emitEvents="emitEvents" @emitEventsParams="emitEventsParams"></myOpenItem>
                </template>


                <div v-if="allcount > 10" style="text-align: center; padding-top: 20px">
                    <el-pagination background layout="prev, pager, next" :total="allcount" :page-size="10"
                        :current-page="page" @current-change="changePage">
                    </el-pagination>
                </div>
            </div>
        </div>

        <el-dialog :visible.sync="dialogVisible" width="478px">
            <div slot="title" style="text-align: center">
                预约资料 <br />
                【请带以下资料去银行办理业务】
            </div>
            <div class="select-time">
                <div class="yuzl-list">
                    <div v-for="(item, index) in books" :key="index" class="yuzl-item">
                        {{ item }}
                    </div>
                </div>
                <div class="button b3" @click="dialogVisible = false">
                    知道了
                </div>
            </div>
        </el-dialog>

        <el-dialog title="预约资料" :visible.sync="dialogVisible2" width="478px">
            <div class="select-time">
                <div class="yuzl-list select">
                    <div v-for="(item, index) in bookList" :key="index" class="yuzl-item button" :class="{
                        'yuzl-item-s': booksId.includes(item.id + ''),
                    }" @click="selectBook(item)">
                        <div class="yuan">
                            <div></div>
                        </div>
                        {{ item.name }}
                    </div>
                </div>
                <div class="buttons">
                    <div class="button b1" @click="bank_edit_resevation(selectItem, 2)">
                        确定
                    </div>
                    <div class="button b2" @click="dialogVisible2 = false">
                        取消
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="请输入本单奖励金" :visible.sync="inputNumberShow" width="478px">
            <div class="select-time">
                <div class="input-number">
                    <el-input-number v-model="inputNumber" :min="0" label="请输入本单奖励金"
                        style="margin-right: 10px"></el-input-number>
                    元
                </div>
                <div class="buttons">
                    <div class="button b1" @click="bank_edit_resevation2(selectItem)">
                        确定
                    </div>
                    <div class="button b2" @click="inputNumberShow = false">
                        取消
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="上传转账凭证" :visible.sync="pingzhengUploadShow" width="535px">
            <div class="select-time" style="padding-right: 8px">
                <el-form :model="ruleForm" ref="ruleForm3" :rules="rules" label-position="right" label-width="122px"
                    class="demo-ruleForm form">
                    <el-form-item label="转账凭证:" prop="receipt2" class="normalheight">
                        <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                            :on-success="handleAvatarSuccess7" :before-upload="beforeAvatarUpload" :headers="header">
                            <img v-if="ruleForm.receipt2" :src="ruleForm.receipt2" class="avatar" />
                            <img v-else src="~/assets/images/openaccount/sfz-4.png" class="upbj" alt="" />
                        </el-upload>
                    </el-form-item>
                </el-form>

                <div class="buttons">
                    <div class="button b1" @click="submitForm('ruleForm3')">
                        确定
                    </div>
                    <div class="button b2" @click="pingzhengUploadShow = false">取消</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="填写提现信息" :visible.sync="TXShow" width="535px">
            <div class="select-time" style="padding-right: 8px">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-position="right" label-width="122px"
                    class="demo-ruleForm form">
                    <el-form-item label="提现人名称:" prop="username">
                        <el-input v-model="ruleForm.username" placeholder="请输入提现人名称">
                            <template slot="append">
                                <img src="~/assets/images/openaccount/phonebook.png" class="phonebook" alt="常用账户"
                                    @click="selectPhonebook" />
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="银行号码:" prop="bank_card">
                        <el-input v-model="ruleForm.bank_card" placeholder="请输入银行号码"></el-input>
                    </el-form-item>
                    <el-form-item label="银行开户行:" prop="bank">
                        <el-input v-model="ruleForm.bank" placeholder="请输入银行开户行"></el-input>
                    </el-form-item>
                    <div class="" style="display: flex; justify-content: space-between">
                        <el-form-item v-if="
                            selectItem && selectItem.applicant_type != '1'
                        " prop="invoice" class="normalheight">
                            <span slot="label">
                                发票: <br />
                                <span style="font-size: 10px; color: #808080">（仅限发票图片）</span>
                            </span>
                            <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                                :on-success="handleAvatarSuccess5" :before-upload="beforeAvatarUpload"
                                :headers="header">
                                <img v-if="ruleForm.invoice && !isPDF" :src="ruleForm.invoice" class="avatar" />
                                <img v-else-if="ruleForm.invoice && isPDF" style="width: 88px; height: auto"
                                    src="~/assets/images/index/model_ppt.png" class="avatar" />
                                <img v-else src="~/assets/images/openaccount/sfz-1.png" class="upbj" alt="" />
                            </el-upload>
                        </el-form-item>
                        <el-form-item label-width="122px" prop="receipt" class="normalheight">
                            <span slot="label">
                                存款账户信息表: <br />
                                <span style="font-size: 10px; color: #808080">（与预约开户公司一致）</span>
                            </span>
                            <el-upload class="avatar-uploader" :action="imgUploadUrl" :show-file-list="false"
                                :on-success="handleAvatarSuccess6" :before-upload="beforeAvatarUpload"
                                :headers="header">
                                <img v-if="ruleForm.receipt && !isPDF" :src="ruleForm.receipt" class="avatar" />
                                <img v-else-if="ruleForm.receipt && isPDF" style="width: 88px; height: auto"
                                    src="~/assets/images/index/model_ppt.png" class="avatar" />
                                <img v-else src="~/assets/images/openaccount/sfz-1.png" class="upbj" alt="" />
                            </el-upload>
                        </el-form-item>
                    </div>
                </el-form>
                <div class="invoice-tips">示例：</div>
                <div class="invoice-tips-imgs">
                    <el-image style="width: 92px; height: 92px; margin-right: 16px" :src="tips1" fit="fill"
                        :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount-tips1-big.png?v=1',
                        ]"></el-image>
                    <!-- <el-image
                        style="width: 92px; height: 92px; margin-right: 16px"
                        :src="tips2"
                        fit="fill"
                        :preview-src-list="[
                            'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount-tips2-big.png',
                        ]"
                    ></el-image> -->
                    <el-image style="width: 92px; height: 92px" :src="tips3" fit="fill" :preview-src-list="[
                        'https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount-tips3-big.png',
                    ]"></el-image>
                </div>
                <div style="padding-bottom: 20px; padding-left: 15px">
                    *请开电子普通发票-现代服务-其他现代服务-服务费<br />
                    <!-- *开票时请选择二维码交付<br /> -->
                    *公司名称：安徽小竹信息技术有限公司<br />
                    *单位税号：91340100MA8NE9RQ8P
                </div>
                <div class="buttons">
                    <div class="button b1" @click="submitForm('ruleForm')">
                        确定
                    </div>
                    <div class="button b2" @click="TXShow = false">取消</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="常用账户" :visible.sync="phonebookShow" width="500px">
            <div v-if="!phonebookAddShow" class="phonebook_box">
                <template v-if="phonebookData">
                    <div class="text">提现人名称：{{ phonebookData.name }}</div>
                    <div class="text">银行号码：{{ phonebookData.number }}</div>
                    <div class="text">银行开户行：{{ phonebookData.bank }}</div>
                    <div class="operate">
                        <el-button type="text" size="small" @click="selectPhoneData">选择</el-button>
                        <el-button type="text" size="small" @click="phonebookDataEdit">编辑</el-button>
                        <el-button type="text" size="small" @click="bank_withdraw_account_del">删除</el-button>
                    </div>
                </template>
                <el-result v-if="!phonebookData" icon="info" title="无常用账户，请添加">
                    <template slot="extra">
                        <el-button type="primary" size="medium" @click="goAddPhonebook">
                            新增账户
                        </el-button>
                    </template>
                </el-result>
            </div>
            <div v-else class="select-time">
                <el-form :model="phonebookData" ref="phonebookDataForm" label-position="right" label-width="122px"
                    class="demo-ruleForm form">
                    <el-form-item label="提现人名称:">
                        <el-input v-model="phonebookData.name" placeholder="请输入提现人名称">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="银行号码:">
                        <el-input v-model="phonebookData.number" placeholder="请输入银行号码">
                        </el-input>
                    </el-form-item>
                    <el-form-item label="银行开户行:">
                        <el-input v-model="phonebookData.bank" placeholder="请输入银行开户行">
                        </el-input>
                    </el-form-item>
                </el-form>
                <div class="buttons" style="padding-top: 30px">
                    <div class="button b1" @click="addPhonebookData">保存</div>
                    <div class="button b2" @click="phonebookAddShow = false">
                        返回
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="拒绝理由" :visible.sync="jujueShow" width="517px">
            <div class="select-time">
                <el-input v-model="jujueText" type="textarea" :rows="3" placeholder="请填写拒绝理由...">
                </el-input>

                <div class="buttons" style="padding-top: 30px">
                    <div class="button b1" @click="refuse_kaihu">确定</div>
                    <div class="button b2" @click="jujueShow = false">取消</div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="修改时间" :visible.sync="xiugaiShow" width="517px">
            <div class="select-time">
                <el-form :model="ruleForm2" :rules="rules" ref="ruleForm2" label-position="right" label-width="110px"
                    class="demo-ruleForm form">
                    <el-form-item label="预约开户日期:" prop="date">
                        <el-date-picker v-model="ruleForm2.date" type="date" placeholder="选择日期" style="width: 100%"
                            format="yyyy-MM-dd" :picker-options="pickerOptions" @change="datechange">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="预约开户时间:" prop="time_id">
                        <el-select v-model="ruleForm2.time_id" placeholder="请选择预约时间" no-data-text="请先选择预约开户日期"
                            style="width: 100%">
                            <template v-if="ruleForm2.date">
                                <el-option v-for="(item, index) in timeList" :key="index" :label="item.name"
                                    :value="item.id" :disabled="item.disabled"></el-option>
                            </template>
                        </el-select>
                    </el-form-item>
                    <!-- <el-form-item label="上门勘点时间:" prop="visit_date_time">
                        <el-date-picker
                            v-model="ruleForm2.visit_date_time"
                            type="datetime"
                            placeholder="选择上门勘点时间"
                            style="width: 100%"
                            format="yyyy-MM-dd hh:mm"
                        >
                        </el-date-picker>
                    </el-form-item> -->
                </el-form>

                <div class="buttons" style="padding-top: 30px">
                    <div class="button b1" @click="submitForm('ruleForm2')">
                        确定
                    </div>
                    <div class="button b2" @click="xiugaiShow = false">
                        取消
                    </div>
                </div>
            </div>
        </el-dialog>

        <el-dialog title="查看提现资料" :visible.sync="lookInfoShow" width="460px">
            <div class="select-time">
                <el-form v-if="lookInfoItem" label-position="right" label-width="114px" class="demo-ruleForm form">
                    <el-form-item label="提现人姓名:" prop="date">
                        {{ lookInfoItem.username }}
                    </el-form-item>
                    <el-form-item label="银行账户:" prop="date">
                        {{ lookInfoItem.bank_card }}
                    </el-form-item>
                    <el-form-item label="银行开户行:" prop="date">
                        {{ lookInfoItem.bank }}
                    </el-form-item>
                    <el-form-item v-if="selectItem.applicant_type != '1'" label="发票:" prop="date">
                        <el-image style="width: 156px; height: 100px" :src="lookInfoItem.invoice" fit="cover"
                            :preview-src-list="[lookInfoItem.invoice]"></el-image>
                    </el-form-item>
                    <el-form-item label="存款账户信息表:" prop="date">
                        <el-image style="width: 156px; height: 100px" v-for="(img, imgi) in lookInfoItem.receipt.split(
                            ','
                        )" :key="imgi" :src="img" fit="cover" :preview-src-list="[img]"></el-image>
                    </el-form-item>
                    <el-form-item v-if="
                        userInfo && (userInfo.is_bank == 3 || userInfo.is_bank == 2) && lookInfoItem.accounting_voucher
                    " label="存款账户动账凭证:">
                        <el-image style="width: 156px; height: 100px" :src="lookInfoItem.accounting_voucher" fit="cover"
                            :preview-src-list="[lookInfoItem.accounting_voucher]"></el-image>
                    </el-form-item>
                </el-form>
            </div>
        </el-dialog>

        <el-dialog title="请您对本次开户银行服务进行评价" :visible.sync="evaluateShow" custom-class="miniPadding" center width="500px">
            <div class="evaluate-dialog">
                <div class="rate">
                    <el-rate v-model="rate" :colors="colors"> </el-rate>
                </div>
                <div class="rate-text">{{ rateText }}</div>
                <div class="tags">
                    <div v-for="(item, index) in bankTags" :key="index" class="tag"
                        :class="{ active: isbank_label(item.label) != -1 }" @click="setBankLabel(item)">
                        {{ item.label }}
                    </div>
                </div>
                <el-input v-model="bank_content" class="evaluate-textarea" type="textarea" :rows="3" resize="none"
                    :maxlength="60" placeholder="请输入您对本次服务的真实评价。您的评价对我们很重要，有助于服务水平的提升和改善。">
                </el-input>
                <div class="label">请您对小竹平台本次服务进行评价</div>
                <div class="le-ku">
                    <div @click="getlabelPingtai(1)">
                        <img v-show="pingtai_star == 5"
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount/ku.png" alt="" />
                        <img v-show="pingtai_star == 1"
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount/ku_s.png" alt="" />
                        不满意
                    </div>
                    <div @click="getlabelPingtai(5)">
                        <img v-show="pingtai_star == 5"
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount/le_s.png" alt="" />
                        <img v-show="pingtai_star == 1"
                            src="https://xzcs-video.oss-cn-beijing.aliyuncs.com/pc/openaccount/le.png" alt="" />
                        满意
                    </div>
                </div>
                <div class="tags">
                    <div v-for="(item, index) in pingtaiTags" :key="index" class="tag"
                        :class="{ active: ispingtai_label(item.label) != -1 }" @click="setPingtaiLabel(item)">
                        {{ item.label }}
                    </div>
                </div>
                <el-input v-model="pingtai_content" class="evaluate-textarea" type="textarea" :rows="3" :maxlength="60"
                    resize="none" placeholder="请输入您对本次服务的真实评价。您的评价对我们很重要，有助于服务水平的提升和改善。">
                </el-input>
                <el-button class="submit" type="primary" round @click="setevaluate">提交评价</el-button>
            </div>
        </el-dialog>

        <el-dialog title="详情" :visible.sync="detailShow" width="800px">
            <myOpenItem :item="detailShowInfo" :status="status" :isDialog="false" @emitEvents="emitEvents"
                @emitEventsParams="emitEventsParams">
            </myOpenItem>
        </el-dialog>

    </div>
</template>

<script>
import {
    my_resevation,
    user_edit_resevation,
    bank_edit_resevation,
    book_list,
    user_withdraw,
    edit_user_withdraw,
    refuse_kaihu,
    datatime_edit_resevation,
    show_withdraw_information,
    status_lists,
    bank_withdraw_account_detail,
    bank_withdraw_account_add,
    bank_withdraw_account_edit,
    bank_withdraw_account_del,
    getlabel,
    setevaluate,
    add_receipt,
    merge_withdraw_lists,
    get_resevation_detail,
    merge_withdraw_info,
    update_mergewithdraw
} from "@/assets/api/openAccount.js";

import { mapState, mapActions } from "vuex";
import {
    getTime,
    goTopSmooth,
    isCurrentTimeBeforeGivenTime,
    isToday,
    parseDate,
    parseDateTime,
    getTime2,
} from "@/assets/utils/utils.js";

import myOpenItem from "@/components/openaccount/myOpenItem"

import tips1 from "~/assets/images/openaccount/tips1.png";
import tips2 from "~/assets/images/openaccount/tips2.png";
import tips3 from "~/assets/images/openaccount/tips3.png";

import { getanalysedata2 } from "@/assets/api/indexApi.js";

import axios from "axios";
export default {
    async asyncData({ params, query }) {
        let data = {};
        return data;
    },
    head() {
        return {
            title: "小竹开户-【小竹财税平台】",
            meta: [],
        };
    },
    layout: "home",
    components: {
        myOpenItem
    },
    data() {
        return {
            tips1: tips1,
            tips2: tips2,
            tips3: tips3,

            fa_name: "",
            search_type: '1',
            getTime: getTime,

            dialogVisible: false,
            dialogVisible2: false,
            books: [],
            booksId: [],
            bookList: [],
            selectItem: null,
            selectStatus: 0,
            status: 1,
            he_status: 1,
            dataList: [],
            detailShow: false,
            detailShowInfo: null,

            inputNumber: 0,
            inputNumberShow: false,

            page: 1,
            allcount: 0,

            isPDF: false,

            getStatusColor: function (item) {
                switch (item.status) {
                    case 1:
                        return "#22C653";
                    case 2:
                        return "#F23737";
                    case 3:
                        return "#1C87F3";
                    case 4:
                        return "#666666";
                    case 5:
                        return "#F23737";
                    case 6:
                        return "#F23737";
                    case 7:
                        return "#F23737";
                    case 8:
                        return "#F23737";
                    case 9:
                        return "#F23737";
                    case 9:
                        return "#1288FF";
                }
            },
            getStatus: function (item) {
                // if (this.userInfo && this.userInfo.is_bank == 1 && [3, 5, 6, 7, 8, 10].indexOf(item.status) !== -1) {
                //     return '已完成'
                // }
                // if (this.userInfo && this.userInfo.is_bank == 3 && item.status == 6) {
                //     return '已审核'
                // }
                // if (this.userInfo && this.userInfo.is_bank == 3 && item.status == 7) {
                //     return '已校验'
                // }
                switch (item.status) {
                    case 1:
                        return "进行中";
                    case 2:
                        return "预约成功";
                    case 3:
                        return "已完成";
                    case 4:
                        return "已取消";
                    case 5:
                        return "提现中";
                    case 6:
                        return "已审核"; // 已审核
                    case 7:
                        return "已校验"; // 已校验
                    case 8:
                        return "提现失败";
                    case 9:
                        return "预约失败 ";
                    case 10:
                        return "待提现 ";
                }
            },

            getHeStatus: function (item) {
                switch (item.status) {
                    case 0:
                        return {
                            name: '提现失败',
                            color: '#666666'
                        };
                    case 1:
                        return {
                            name: '提现中',
                            color: '#F63C5A'
                        };
                    case 2:
                        return {
                            name: '已审核',
                            color: '#22C653'
                        };
                    case 3:
                        return {
                            name: '已校验',
                            color: '#22C653'
                        };
                    case 4:
                        return {
                            name: '已完成',
                            color: '#1C87F3'
                        };

                }
            },

            jujueShow: false,
            jujueText: "",
            status_1_count: 0,
            status_2_count: 0,
            status_5_count: 0,
            status_7_count: 0,
            status_6_count: 0,
            status_merge: { 1: 0, 2: 0, 3: 0, 4: 0 },

            xiugaiShow: false,
            timeList: [],
            ruleForm2: {
                date: "",
                time_id: "",
                visit_date_time: "",
            },

            lookInfoShow: false,
            lookInfoItem: null,

            phonebookId: "",
            phonebookAddShow: false,
            phonebookShow: false,
            phonebookData: null,
            TXShow: false,
            ifTXShow2: false,
            imgUploadUrl: "",
            token: "",
            ruleForm: {
                username: "",
                bank_card: "",
                bank: "",
                invoice: "",
                receipt: "",
                receipt2: ''
            },
            rules: {
                visit_date_time: [
                    {
                        required: true,
                        message: "请输入上门勘点时间",
                        trigger: "blur",
                    },
                ],
                date: [
                    {
                        type: "date",
                        required: true,
                        message: "请选择日期",
                        trigger: "blur",
                    },
                ],
                time_id: [
                    {
                        required: true,
                        message: "请选择预约时间",
                        trigger: "change",
                    },
                ],
                username: [
                    {
                        required: true,
                        message: "请输入提现人名称",
                        trigger: "blur",
                    },
                ],
                bank_card: [
                    {
                        required: true,
                        message: "请输入银行号码",
                        trigger: "blur",
                    },
                ],
                bank: [
                    {
                        required: true,
                        message: "请输入银行开户行",
                        trigger: "blur",
                    },
                ],
                invoice: [
                    {
                        required: true,
                        message: "请上传发票",
                        trigger: "blur",
                    },
                ],
                receipt: [
                    {
                        required: true,
                        message: "请上传回执单",
                        trigger: "blur",
                    },
                ],
                receipt2: [
                    {
                        required: true,
                        message: "请上传转账凭证",
                        trigger: "blur",
                    },
                ],
            },

            getAccount: function (k) {
                for (let item of this.openaccountList) {
                    if (k == item.id) return item.name;
                }
            },

            pickerOptions: {
                disabledDate(date) {
                    // 获取当前日期和时间
                    const now = new Date();

                    // 获取当前日期的00:00:00
                    const todayStart = new Date(
                        now.getFullYear(),
                        now.getMonth(),
                        now.getDate(),
                        0,
                        0,
                        0,
                        0
                    );

                    // 获取明天的00:00:00
                    const tomorrowStart = new Date(todayStart);
                    tomorrowStart.setDate(todayStart.getDate());
                    // 比较时间
                    return date.getTime() < tomorrowStart.getTime();
                },
            },

            evaluateShow: false,
            colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
            rate: 5,
            bank_content: "",
            bank_label: [],
            pingtai_star: 5, // 5满意 1不满意
            pingtai_label: [],
            pingtai_content: "",

            bankTags: [],
            pingtaiTags: [],

            isbank_label: (label) => {
                return this.bank_label.indexOf(label);
            },
            ispingtai_label: (label) => {
                return this.pingtai_label.indexOf(label);
            },

            loading: true,
            pingzhengUploadShow: false,
        };
    },
    computed: {
        ...mapState("common", {
            userInfo: (state) => state.userInfo,
        }),
        header() {
            return {
                token: this.userInfo && this.token ? this.token : "",
            };
        },
        rateText() {
            switch (this.rate) {
                case 5:
                    return "非常满意，银行效率很快";
                case 4:
                    return "较满意，银行服务可以";
                case 3:
                    return "一般，银行服务有待提高";
                case 2:
                    return "不满意，银行服务需要提高";
                case 1:
                    return "非常不满意，各方面都很差";
                default:
                    return "";
            }
        },
    },
    created() { },
    mounted() {
        this.token = localStorage.getItem("token");
        this.imgUploadUrl = axios.defaults.baseURL + "/api/common/upload";

        if (this.token) {
            this.loading = true
            this.getUserInfo2().then((user) => {
                if (user.is_bank == 0) this.status = 2
                if (user.is_bank == 1) this.status = 1
                if (user.is_bank == 2) this.status = 1
                if (user.is_bank == 3) this.status = 6

                this.my_resevation();

                if (user && user.is_bank > 1) {
                    this.status_lists();
                }
            });
        }

        getanalysedata2({
            m_id: 15,
            type: 1,
            describe: "我的预约",
            code: "PU2",
        });
        this.getlabelBnak();
        this.getlabelPingtai(5);
    },
    watch: {},
    methods: {
        ...mapActions("common", ["getUserInfo2"]),

        // item事件
        emitEvents(emitName, item) {
            this[emitName](item)
        },
        emitEventsParams(emitName, item, params) {
            this[emitName](item, params)
        },

        setBankLabel(item) {
            let index = this.bank_label.indexOf(item.label);
            if (index == -1) {
                this.bank_label.push(item.label);
                this.bank_content += `${item.label}：\n`;
            } else {
                this.bank_label.splice(index, 1);
            }
        },
        setPingtaiLabel(item) {
            let index = this.pingtai_label.indexOf(item.label);
            if (index == -1) {
                this.pingtai_label.push(item.label);
                // this.pingtai_content += `${item.label}：\n`;
            } else {
                this.pingtai_label.splice(index, 1);
            }
        },
        async setevaluate() {
            const res = await setevaluate({
                resevation_id: this.selectItem.id,
                bank_star: this.rate,
                bank_content: this.bank_content
                    ? this.bank_content
                    : "默认好评",
                pingtai_star: this.pingtai_star,
                pingtai_label: this.pingtai_label.join(","),
                pingtai_content: this.pingtai_content
                    ? this.bank_content
                    : "默认好评",
            });
            if (res.code == 1) {
                this.evaluateShow = false;
                this.$alert("评价成功", "提示", {
                    confirmButtonText: "确定",
                });
            }
        },
        // 获取评价标签
        async getlabelBnak() {
            const res = await getlabel({
                type: 1,
                star: this.rate,
            });
            if (res.code == 1) {
                this.bankTags = res.data;
            }
        },
        async getlabelPingtai(rate) {
            this.pingtai_star = rate;
            this.pingtai_label = [];
            const res = await getlabel({
                type: 2,
                star: rate,
            });
            if (res.code == 1) {
                this.pingtaiTags = res.data;
            }
        },
        // 删除
        async bank_withdraw_account_del() {
            const res = await bank_withdraw_account_del({
                id: this.phonebookId,
            });
            this.selectPhonebook();
        },
        // 编辑
        phonebookDataEdit() {
            this.phonebookAddShow = true;
            this.phonebookData.isEdit = 1;
        },
        // 确定选择
        selectPhoneData() {
            this.ruleForm.username = this.phonebookData.name;
            this.ruleForm.bank_card = this.phonebookData.number;
            this.ruleForm.bank = this.phonebookData.bank;

            this.phonebookShow = false;
        },
        // 添加账户
        async addPhonebookData() {
            let res = null;
            console.log(this.phonebookData.isEdit);
            if (this.phonebookData.isEdit)
                res = await bank_withdraw_account_edit({
                    id: this.phonebookId,
                    name: this.phonebookData.name,
                    bank: this.phonebookData.bank,
                    number: this.phonebookData.number,
                });
            else
                res = await bank_withdraw_account_add({
                    name: this.phonebookData.name,
                    bank: this.phonebookData.bank,
                    number: this.phonebookData.number,
                });
            if (res.code == 1) {
                this.phonebookAddShow = false;
                this.selectPhonebook();
                // this.phonebookData = {
                //     name: this.phonebookData.name,
                //     bank: this.phonebookData.bank,
                //     number: this.phonebookData.number,
                // };
            }
        },
        // 点击新增账户
        goAddPhonebook() {
            this.phonebookAddShow = true;
            this.phonebookData = {
                name: "",
                bank: "",
                number: "",
            };
        },
        // 显示常用账号选择
        async selectPhonebook() {
            const res = await bank_withdraw_account_detail({});
            if (res.code == 1) {
                this.phonebookShow = true;
                this.phonebookData = res.data;
                if (res.data) this.phonebookId = res.data.id;
            }
        },

        // 如果是就获取统计
        async status_lists() {
            const res = await status_lists({});
            if (res.code == 1) {
                this.status_1_count = res.data["1"];
                this.status_5_count = res.data["5"];
                this.status_2_count = res.data["2"];
                this.status_6_count = res.data["6"];
                this.status_7_count = res.data["7"];
                this.status_merge = res.data.merge
            }
        },

        async book_list() {
            const res = await book_list({
                id: this.selectItem.id,
            });
            if (res.code == 1) {
                this.bookList = res.data;
                this.dialogVisible2 = true;
            }
        },

        // 获取合并提现
        async merge_withdraw_lists(is = true) {
            this.loading = true
            let obj = {
                status: this.he_status,
                // status: 0,
                page: this.page,
            }
            if (this.search_type == '1')
                obj.fa_name = this.fa_name
            if (this.search_type == '2')
                obj.company_name = this.fa_name
            const res = await merge_withdraw_lists(obj);
            if (res.code == 1) {
                for (let item of res.data) {
                    console.log(item.resevation)
                }
                this.dataList = res.data;
                if (this.dataList.length > 0)
                    this.allcount = this.dataList[0].allcount;
                else this.allcount = 0;
                if (is)
                    this.$nextTick(() => {
                        goTopSmooth();
                    });
                if (this.userInfo && this.userInfo.is_bank > 1) {
                    this.status_lists();
                }
            }
            this.loading = false
        },

        async my_resevation(is = true) {

            // 针对合拼提现单独处理
            // if (this.status == 5) {
            //     this.he_status = 1
            //     this.merge_withdraw_lists()
            //     return
            // } else if (this.status == 6) {
            //     this.he_status = 2
            //     this.merge_withdraw_lists()
            //     return
            // } else if (this.status == 7) {
            //     this.he_status = 3
            //     this.merge_withdraw_lists()
            //     return
            // } else if (this.status == 8) {
            //     this.he_status = 0
            //     this.merge_withdraw_lists()
            //     return
            // }


            this.loading = true
            let obj = {
                status: this.status,
                // status: 0,
                page: this.page,
            }
            if (this.search_type == '1')
                obj.fa_name = this.fa_name
            if (this.search_type == '2')
                obj.company_name = this.fa_name
            const res = await my_resevation(obj);
            if (res.code == 1) {
                for (let item of res.data) {
                    item.checked = false
                }
                this.dataList = res.data;
                if (this.dataList.length > 0)
                    this.allcount = this.dataList[0].allcount;
                else this.allcount = 0;
                if (is)
                    this.$nextTick(() => {
                        goTopSmooth();
                    });
                if (this.userInfo && this.userInfo.is_bank > 1) {
                    this.status_lists();
                }
            }
            this.loading = false

        },

        // 重新提交
        goFrom(item) {
            localStorage.setItem("openaccountData", JSON.stringify(item));
            this.$router.push({
                path: "/openaccount/form?rewrite=1",
            });
        },

        changePage(page) {
            this.page = page;
            this.my_resevation();
        },

        lookYY(item) {
            console.log(item);
            this.dialogVisible = true;
            this.books = item.books.split(",");
        },

        async cancelYY(item) {
            const res = await user_edit_resevation({
                id: item.id,
            });
            if (res.code == 1) {
                this.my_resevation(false);
            }
        },

        selectAll() {
            for (let item of this.dataList) {
                item.checked = true
            }
        },

        async oneClickProcessing() {
            let id = ''
            let num = 0
            for (let item of this.dataList) {
                console.log(item.checked)
                if (item.checked) {
                    num++
                    id += id ? ',' + item.id : item.id
                }
            }
            if (num == 0) return
            this.$confirm(`将处理${num}条数据`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.bank_edit_resevation({ id: id, book_id: '' }, 3)
            }).catch(() => {

            });
        },


        async bank_edit_resevation(item, status) {
            const loading = this.$loading({
                lock: true,
                text: '操作中...',
            });

            const res = await bank_edit_resevation({
                id: item.id,
                status: status,
                book_id: item.book_id ? item.book_id : "",
            });
            setTimeout(() => {
                loading.close();
            }, 800);
            if (res.code == 1) {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.my_resevation(false);
                this.dialogVisible2 = false;
            }
        },

        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (formName == "ruleForm") {
                        this.user_withdraw();
                    } else if (formName == "ruleForm2") {
                        this.datatime_edit();
                    } else if (formName == "ruleForm3") {
                        this.uploadPingzheng();
                    }
                    // console.log(this.ruleForm)
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },

        async uploadPingzheng() {
            const res = await add_receipt({
                id: this.selectItem.id,
                receipt: this.ruleForm.receipt2
            })
            if (res.code == 1) {
                this.pingzhengUploadShow = false;
                this.selectItem.transfer_voucher = this.ruleForm.receipt2 + ''
                this.ruleForm.receipt2 = ''
                this.$alert('转账凭证上传成功', '提示', {
                    confirmButtonText: '确定',
                });
            }
        },

        async user_withdraw() {
            let params = {
                id: this.selectItem.id,
                username: this.ruleForm.username,
                bank_card: this.ruleForm.bank_card,
                bank: this.ruleForm.bank,
                invoice: this.ruleForm.invoice,
                receipt: this.ruleForm.receipt,
            };

            let res = null;
            if (this.ifTXShow2) res = await edit_user_withdraw(params);
            else res = await user_withdraw(params);
            this.ifTXShow2 = false;
            if (res.code == 1) {
                if (this.selectItem.is_evalute_show == 1) {
                    this.$confirm(
                        "您已成功提交提现信息,3秒填写评价，帮我们优化体验。",
                        "提示",
                        {
                            confirmButtonText: "立即评价",
                            cancelButtonText: "跳过",
                        }
                    )
                        .then(() => {
                            this.evaluateShow = true;
                        })
                        .catch(() => {
                            // 默认好评
                            setevaluate({
                                resevation_id: this.selectItem.id,
                                bank_star: 5,
                                pingtai_star: 5,
                                bank_content: "默认好评",
                            });
                        });
                }
                this.TXShow = false;
                this.my_resevation(false);
            }
        },

        async lookDetail(item) {
            const res = await get_resevation_detail({
                id: item.id
            })
            if (res.code == 1) {
                this.detailShowInfo = res.data;
                this.detailShow = true
            }
        },

        // 申请提现
        sqTX(item) {
            this.selectItem = item;
            this.TXShow = true;
        },

        // 重新提现
        cxTX(item) {
            this.selectItem = item;
            this.TXShow = true;
            this.ifTXShow2 = true;
        },

        // 拒绝
        jujue(item, index) {
            this.jujueShow = true;
            this.selectItem = item;
            this.selectStatus = index;
        },
        async refuse_kaihu() {
            if (!this.jujueText) {
                this.$alert("请填写拒绝理由", "提示", {
                    confirmButtonText: "了解",
                });
                return;
            }
            const res = await refuse_kaihu({
                id: this.selectItem.id,
                reason: this.jujueText,
                status: this.selectStatus,
            });
            if (res.code == 1) {
                // this.$alert("已拒绝", "提示", {
                //     confirmButtonText: "了解",
                // });
                this.jujueShow = false;
                this.my_resevation(false);
            }
        },

        // 修改
        xiugai(item) {
            this.selectItem = item;
            this.timeList = item.bank_time;
            this.ruleForm2.date = parseDate(item.date);
            this.ruleForm2.time_id = item.time_id;
            this.ruleForm2.visit_date_time = parseDateTime(
                item.visit_date + " " + item.visit_time + ":00"
            );
            this.datechange();
            this.$nextTick(() => {
                this.xiugaiShow = true;
            });
        },
        datechange() {
            if (isToday(this.ruleForm2.date)) {
                for (let item of this.timeList) {
                    const [startTimeStr, endTimeStr] = item.name.split("-");
                    if (isCurrentTimeBeforeGivenTime(startTimeStr)) {
                        item.disabled = false;
                    } else {
                        item.disabled = true;
                    }
                }
                this.timeList = [...this.timeList];
            } else {
                for (let item of this.timeList) {
                    item.disabled = false;
                }
                this.timeList = [...this.timeList];
            }
        },
        async datatime_edit() {
            let visit_date_time = getTime(this.ruleForm2.visit_date_time).split(
                " "
            );
            const res = await datatime_edit_resevation({
                id: this.selectItem.id,
                date: getTime2(this.ruleForm2.date),
                time_id: this.ruleForm2.time_id,
                visit_date: visit_date_time[0],
                visit_time: visit_date_time[1].slice(0, -3),
            });
            if (res.code == 1) {
                this.xiugaiShow = false;
                this.my_resevation(false);
            }
        },

        // 查看资料
        async lookInfo(item) {
            this.selectItem = item;
            const res = await show_withdraw_information({
                id: this.selectItem.id,
            });
            if (res.code == 1) {
                this.lookInfoShow = true;
                this.lookInfoItem = res.data;
            }
        },

        // 查看发票
        async merge_withdraw_info(item) {
            this.selectItem = item;
            const res = await merge_withdraw_info({
                id: this.selectItem.id,
            });
            if (res.code == 1) {
                this.lookInfoShow = true;
                this.lookInfoItem = res.data;
            }

        },

        // 上传凭证
        pingzhengUpload(item) {
            this.selectItem = item;
            this.pingzhengUploadShow = true;
        },

        async bank_edit_resevation2(item) {
            const res = await bank_edit_resevation({
                status: 2,
                id: item.id,
            });
            if (res.code == 1) {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.showEdit(item);
                // this.my_resevation(false);
                // this.inputNumberShow = false;
            }
        },

        async update_mergewithdraw(item, status) {
            const res = await update_mergewithdraw({
                status: status,
                id: item.id,
            })
            if (res.code == 1) {
                this.$message({
                    message: "修改成功",
                    type: "success",
                });
                this.my_resevation(false);
            }
        },

        // 联系银行
        lookBankTel(item) {
            this.$alert(item.bank_tel, "银行联系电话", {
                confirmButtonText: "确定",
            });
        },

        showIN(item) {
            this.inputNumber = 0;
            // this.inputNumberShow = true;
            this.selectItem = item;
            // this.bank_edit_resevation2(this.selectItem);
        },

        showEdit(item) {
            this.selectItem = item;
            this.book_list();

            if (item.book_id) this.booksId = item.book_id.split(",");
            else this.booksId = [];
        },

        selectBook(item) {
            let i = this.booksId.indexOf(item.id + "");
            if (i != -1) {
                this.booksId.splice(i, 1);
            } else {
                this.booksId.push(item.id + "");
            }
            this.selectItem.book_id = this.booksId.join(",");
        },

        look(i) {
            this.status = i;
            this.page = 1;
            this.fa_name = "";
            this.my_resevation();
        },

        goHe() {
            window.open(`${window.location.origin}/openaccount/myopenHe`);
        },

        handleAvatarSuccess5(res, file) {
            this.ruleForm.invoice = res.data.fullurl;
        },

        handleAvatarSuccess6(res, file) {
            this.ruleForm.receipt = res.data.fullurl;
        },

        handleAvatarSuccess7(res, file) {
            this.ruleForm.receipt2 = res.data.fullurl;
        },

        beforeAvatarUpload(file) {
            console.log(file.type);
            const isType =
                file.type == "image/jpeg" ||
                file.type == "image/jpg" ||
                file.type == "image/png" ||
                file.type == "application/pdf";
            const isLtMB = file.size / 1024 / 1024 < 0.5;
            if (file.type == "application/pdf") {
                this.isPDF = true;
            } else {
                this.isPDF = false;
            }
            if (!isType) {
                this.$message.error("请上传PDF或者图片!");
            }
            if (!isLtMB) {
                this.$message.error("上传文件大小不能超过 500kb!");
            }
            return isType && isLtMB;
        },

        keydown(e) {
            if (!e.shiftKey && e.keyCode == 13) {
                e.cancelBubble = true; //ie阻止冒泡行为
                e.stopPropagation(); //Firefox阻止冒泡行为
                e.preventDefault(); //取消事件的默认动作*换行
                //以下处理发送消息代码
                if (e.keyCode == 13) {
                    this.my_resevation();
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.main {
    width: 1200px;
    padding-top: 54px;
    margin: 16px auto;
    background: linear-gradient(180deg, #c9e7ff 0%, #f9f9f9 20%);
    position: relative;
    min-height: 600px;
    padding-bottom: 40px;

    .index-title-bj {
        position: absolute;
        z-index: 1;
        top: 5px;
        left: calc(50% + 60px);
        width: 233px;
        height: auto;
    }
}

.title {
    text-align: center;
    font-weight: 700;
    font-size: 40px;
}

.button {
    user-select: none;
    cursor: pointer;

    &:hover {
        opacity: 0.9;
    }

    &:active {
        opacity: 0.8;
    }
}

.search {
    width: 1000px;
    margin: 50px auto 0;
    height: 40px;
    display: flex;
    justify-content: flex-end;
    align-items: center;

    .search-input {
        width: 330px;

        &::v-deep .el-input-group__prepend {
            width: 80px;
            position: relative;
            z-index: 10;
        }
    }

    .search-button {
        margin-left: 10px;
        position: relative;
        z-index: 10;
    }
}

.content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 1000px;
    margin: 20px auto 0;
}

.left-tab {
    width: 211px;

    .tab-item {
        width: 211px;
        height: 66px;
        line-height: 66px;
        text-align: center;
        background: #ffffff;
        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.05);
        margin-bottom: 14px;
        font-weight: 500;
        font-size: 20px;
        color: #333333;
    }

    .active {
        background: #1c87f3 !important;
        color: #ffffff !important;
    }
}

.max-num {
    padding-top: 25px;
    padding-left: 34px;
    font-weight: 600;
    font-size: 18px;
    color: #060621;
    background-color: #ffffff;

    span {
        color: #007ffe;
    }
}

.right-list {
    .merge-item {
        margin-bottom: 10px;
        width: 766px;
        background: #ffffff;
        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.05);
        padding: 25px 34px 40px;
        position: relative;

        .merge-time {
            font-weight: 700;
            font-size: 18px;
            color: #1C87F3;

            span {
                font-weight: 500;
                font-size: 18px;
                color: #333333;
                padding-left: 34px;
            }
        }

        .he_status {
            position: absolute;
            right: 34px;
            top: 25px;
        }
    }

    .merge-resevation {
        background: rgba(244, 244, 244, 0.36);
        border-radius: 10px;
        padding: 15px 20px;
        margin-top: 20px;
        position: relative;

        .resevation-status {
            position: absolute;
            top: 15px;
            right: 20px;
            font-size: 18px;
            line-height: 26px;
        }

        .resevation-text {
            font-weight: 400;
            font-size: 18px;
            color: #020C17;
            line-height: 26px;
            padding-bottom: 10px;
            display: flex;

            .img {
                margin-left: 22px;
                border-radius: 10px;
            }
        }

        .buttons {
            margin-top: 10px;
            padding-top: 20px;
            border-top: 1px solid #BFC1C7;
        }

    }

    .he_buttons {
        margin-top: 30px;
    }



    .buttons {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;
        color: #ffffff;

        .moeny-sum {
            position: absolute;
            left: 0;
            font-size: 18px;
            font-weight: 700;
            color: #333333;

            span {
                color: #FA5151;
                font-size: 24px;
            }
        }

        .text-but {
            position: absolute;
            left: 0;
            font-size: 21px;
            color: #000B1A;
        }

        .button1 {
            padding: 0 18px;
            background: #1c87f3;
            border-radius: 10px;
            height: 40px;
            line-height: 40px;
            margin-left: 17px;
        }

        .button2 {
            padding: 0 18px;
            background: #ff8c2e;
            border-radius: 10px;
            height: 40px;
            line-height: 40px;
            margin-left: 17px;
        }

        .button3 {
            padding: 0 18px;
            background: #E9EAEB;
            border-radius: 10px;
            height: 40px;
            line-height: 40px;
            margin-left: 17px;
        }

        .bauto {
            width: auto !important;
            padding-left: 10px !important;
            padding-right: 10px !important;
        }
    }

    .item {
        margin-bottom: 10px;
        width: 766px;
        // height: 240px;
        background: #ffffff;
        box-shadow: 0px 3px 2px 0px rgba(0, 0, 0, 0.05);
        padding: 25px 50px 40px;
        position: relative;

        .text-time {
            font-weight: 700;
            font-size: 18px;
            color: #1c87f3;
            line-height: 26px;
            padding-bottom: 10px;
        }

        .text-img {
            display: flex;
            margin-bottom: 15px;

            .label {
                width: 144px;
            }

            .img {
                margin-right: 20px;
            }
        }
    }

}

.select-time {
    .buttons {
        display: flex;
        align-items: center;
        justify-content: center;

        >div {
            width: 124px;
            height: 40px;
            background: #1c87f3;
            border-radius: 10px;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            margin: 0 19px;
            text-align: center;
            line-height: 40px;
        }

        .b1 {
            background: #1c87f3;
        }

        .b2 {
            background: #ff8c2e;
        }
    }

    .b3 {
        width: 124px;
        height: 40px;
        background: #1c87f3;
        border-radius: 10px;
        font-weight: 400;
        font-size: 16px;
        color: #ffffff;
        text-align: center;
        line-height: 40px;
        margin: 0 auto;
    }
}

.yuzl-list {
    margin-bottom: 25px;

    .yuzl-item {
        width: 100%;
        background: rgba(229, 235, 255, 0.5);
        border-radius: 10px;
        text-align: center;
        font-weight: 400;
        font-size: 20px;
        color: #333333;
        margin-bottom: 15px;
        padding: 16px 40px;
        line-height: 29px;
    }
}

.select {
    .yuzl-item {
        position: relative;

        .yuan {
            width: 22px;
            height: 22px;
            background: #ffffff;
            border: 1px solid #1c87f3;
            border-radius: 21px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: absolute;
            top: calc(50% - 11px);
            left: 10px;

            div {
                width: 8px;
                height: 8px;
                background: #1c87f3;
                display: none;
                border-radius: 8px;
            }
        }
    }

    .yuzl-item-s {
        .yuan {
            div {
                display: block;
            }
        }
    }
}

.input-number {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 30px;
}

.avatar-uploader {
    &::v-deep .el-upload {
        cursor: pointer;
        position: relative;
        overflow: hidden;
        height: 80px;
    }
}

.avatar-uploader {
    &::v-deep .el-upload:hover {
        border-color: #409eff;
    }
}

// .avatar-uploader-icon {
//     font-size: 28px;
//     color: #8c939d;
//     width: 237px;
//     height: 150px;
//     line-height: 150px;
//     text-align: center;
// }
.avatar {
    width: 120px;
    height: 80px;
    display: block;
    object-fit: cover;
}

.upbj {
    width: 120px;
    height: 80px;
    display: block;
    object-fit: cover;
}

::v-deep .normalheight {
    .el-form-item__label {
        line-height: normal;
    }
}

.invoice-tips {
    font-weight: 400;
    font-size: 14px;
    color: #333333;
    margin-bottom: 14px;
    margin-left: 15px;
}

.invoice-tips-imgs {
    margin-left: 15px;
    margin-bottom: 14px;
}



.phonebook {
    width: 20px;
    height: 20px;
    display: block;
    cursor: pointer;
}

.phonebook_box {
    .text {
        font-size: 16px;
        color: #010d2f;
        line-height: 24px;
    }

    .operate {
        display: flex;
        justify-content: flex-end;
    }
}

.evaluate-dialog {
    padding-bottom: 20px;
    padding-top: 25px;

    .rate {
        display: flex;
        align-items: center;
        justify-content: center;
        transform: scale(3);
    }

    .rate-text {
        margin-top: 25px;
        text-align: center;
        font-weight: 400;
        font-size: 18px;
        color: #333333;
        margin-bottom: 21px;
    }

    .tags {
        width: 400px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .tag {
            width: 108px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #f1f1f1;
            border-radius: 5px;
            font-size: 14px;
            color: #333333;
            cursor: pointer;
        }

        .active {
            color: #1b8dff;
            background: rgba(27, 141, 255, 0.15);
        }
    }

    .evaluate-textarea {
        width: 400px;
        margin: 20px auto 0;
        display: block;
    }

    .label {
        font-weight: 700;
        font-size: 24px;
        color: #333333;
        text-align: center;
        padding-top: 25px;
    }

    .le-ku {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        margin-bottom: 20px;

        div {
            text-align: center;
            margin: 0 60px;
            cursor: pointer;

            img {
                display: block;
                width: 45px;
                height: 45px;
                margin-bottom: 10px;
            }
        }
    }

    .submit {
        width: 200px;
        display: block;
        margin: 20px auto 0;
    }
}
</style>